<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        @media screen and (max-device-width:768px) {
            body{
                background-color: blue;
            }
        }
        @media screen and (min-device-width:100px) {
            body{
                background-color: black;
            }
        }

    </style>
</head>

<body>


    <a href="#" style="cursor:hand">CSS鼠标手型效果</a><br><br>
    <a href="#" style="cursor:pointer">CSS鼠标手型效果</a><br><br>
    <a href="#" style="cursor:crosshair">CSS鼠标十字型效果</a><br><br>
    <a href="#" style="cursor:help">CSS鼠标问号效果</a><br><br>
    <a href="#" style="cursor:text">是移动到文本上的那种效果</a><br><br>
    <a href="#" style="cursor:wait">是等待的那种效果</a><br><br>
    <a href="#" style="cursor:default">是默认效果</a><br><br>
    <a href="#" style="cursor:e-resize">是向右的箭头</a><br><br>
    <a href="#" style="cursor:ne-resize">是向右上的箭头</a><br><br>
    <a href="#" style="cursor:n-resize">是向上的箭头</a><br><br>
    <a href="#" style="cursor:nw-resize">是向左上的箭头</a><br><br>
    <a href="#" style="cursor:w-resize">是向左的箭头</a><br><br>
    <a href="#" style="cursor:sw-resize">是左下的箭头</a><br><br>
    <a href="#" style="cursor:s-resize">是向下的箭头</a><br><br>
    <a href="#" style="cursor:se-resize">是向右下的箭头</a><br><br>
    <a href="#" style="cursor:auto">是由系统自动给出效果</a><br><br>




</body>

</html>